<template>
    <div>
        <Category :flag="flag" />
        <el-card class="base-margin">
            <div v-show="scenc === 0">
                <el-button
                    icon="Plus"
                    type="primary"
                    :disabled="!categoryStore.c3Id"
                    @click="addSpu"
                >
                    添加SPU
                </el-button>
                <el-table class="base-margin" border :data="records">
                    <el-table-column
                        label="序号"
                        type="index"
                        width="80"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        label="SPU名称"
                        prop="spuName"
                    ></el-table-column>
                    <el-table-column
                        label="SPU描述"
                        prop="description"
                    ></el-table-column>
                    <el-table-column label="操作">
                        <template #="{ row, $index }">
                            <el-button
                                icon="Plus"
                                type="primary"
                                size="small"
                                @click="addSku(row)"
                                title="添加SKU"
                            ></el-button>
                            <el-button
                                icon="Edit"
                                type="warning"
                                size="small"
                                @click="updateSpu(row)"
                                title="修改SPU"
                            ></el-button>
                            <el-button
                                icon="Warning"
                                type="info"
                                size="small"
                                title="查看 SKU 列表"
                                @click="showSku(row)"
                            ></el-button>
                            <el-popconfirm
                                title="Are you sure to delete this?"
                                @confirm="deleteSpu(row.id)"
                            >
                                <template #reference>
                                    <el-button
                                        icon="Delete"
                                        type="danger"
                                        size="small"
                                        title="删除 SPU"
                                    ></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination
                    background
                    layout=" prev, pager, next, jumper,->,total, sizes"
                    :total="total"
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[3, 5, 7, 9]"
                    @current-change="getSpuList"
                    @size-change="getSpuList"
                    class="base-margin"
                />
            </div>
            <!-- 添加/修改 sku 子组件 -->
            <spu-form
                v-show="scenc === 1"
                @changeScenc="changeScenc"
                ref="spu"
            ></spu-form>
            <!-- 添加 sku -->
            <SkuFrom
                v-show="scenc === 2"
                @changeScenc="changeScenc"
                ref="sku"
            />
            <el-dialog title="SKU列表" v-model="showSkuList">
                <el-table border :data="skuList">
                    <el-table-column
                        label="sku名字"
                        prop="skuName"
                    ></el-table-column>
                    <el-table-column
                        label="sku价格"
                        prop="price"
                    ></el-table-column>
                    <el-table-column
                        label="sku重量"
                        prop="weight"
                    ></el-table-column>
                    <el-table-column label="sku图片">
                        <template #="{ row }">
                            <el-image :src="row.skuDefaultImg"></el-image>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import type {
    HasSpuResponseData,
    Records,
    SkuData,
} from '@/api/product/spu/type';
import { onBeforeUnmount, ref, watch } from 'vue';
import useCategoryStore from '@/store/modules/category';
import { reqHsaSpu, reqSkuList, reqDeleteSpu } from '@/api/product/spu';
import SpuForm from './spuForm.vue';
import SkuFrom from './skuForm.vue';
import type { SpuDate } from '@/api/product/spu/type';
import { ElMessage } from 'element-plus';
const currentPage = ref<number>(1);
const flag = ref<boolean>(true); //控制 Category 组件是否禁用
const scenc = ref<number>(0); //控制场景切换
const pageSize = ref<number>(3);
const records = ref<Records>([]);
const total = ref<number>(0);
// 存储全部的 sku 数据
const skuList = ref<SkuData[]>([]);
const showSkuList = ref<boolean>(false);
// 获取子组件实例
const spu = ref<any>();
const sku = ref<any>();
const categoryStore = useCategoryStore();
// 监听三级分类 ID 的变化
watch(
    () => categoryStore.c3Id,
    () => {
        if (!categoryStore.c3Id) return;

        getSpuList();
    },
);
const getSpuList = async () => {
    if (!categoryStore.c3Id) return;
    const res: HasSpuResponseData = await reqHsaSpu(
        currentPage.value,
        pageSize.value,
        categoryStore.c3Id,
    );
    if (res.code === 200) {
        records.value = res.data.records;
        total.value = res.data.total;
    }
};
// 添加 SPU
const addSpu = () => {
    scenc.value = 1;
    spu.value.initSpu(categoryStore.c3Id);
};
const changeScenc = (num: number) => {
    scenc.value = num;
    getSpuList();
};
// 修改 SPU
const updateSpu = (row: SpuDate) => {
    // 通过 ref 调用字组件的方法
    spu.value.initSpuForm(row);
    scenc.value = 1;
};
// 添加 sku
const addSku = (row: SpuDate) => {
    scenc.value = 2;
    sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row);
};
// 查看 sku
const showSku = async (row: SpuDate) => {
    const res = await reqSkuList(row.id as number);
    console.log('res', res);
    if (res.code === 200) {
        skuList.value = res.data;
        showSkuList.value = true;
    }
};
// 删除 SPU
const deleteSpu = async (id: number) => {
    const res = await reqDeleteSpu(id);
    if (res.code === 200) {
        ElMessage.success('删除成功');
        getSpuList();
    } else {
        ElMessage.error('删除失败');
    }
};
onBeforeUnmount(() => {
    categoryStore.$reset();
});
</script>

<style scoped lang="scss"></style>
